<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
</head>
<body>
      <div class="container">
            <div class="control">
                  <button>选项1</button>
                  <button>选项2</button>
                  <button>选项3</button>
            </div>
            <div class="content">
                  <div class="box">内容1</div>
                  <div class="box">内容2</div>
                  <div class="box">内容3</div>
            </div>
      </div>
      <script>
            var btns = document.querySelectorAll(".control button");
            var boxs = document.querySelectorAll(".box")
            for(var i = 0 ; i < btns.length ; i ++){
                  btns[i].index = i;
                  btns[i].onclick = function(){
                        // 获取到按钮的下标;
                        var index = this.index
                        // 隐藏所有元素;
                        for(var i = 0 ; i < boxs.length ; i ++){
                              boxs[i].style.display = "none";     
                        }
                        // 显示当前的元素
                        boxs[index].style.display = "block";    
                  }
            }
            // 1. 自己画一张图片; 连线并注释 构造函数，实例对象，原型对象三者关系;
            // 2. 编写parent构造函数; 并创建一个自我介绍功能;
            // 3. 选项卡改写;  构造函数里面放数据; 原型对象里面放算法;
      </script>      
</body>
</html>